<template>
  <div class="w">
    <MShelf title="支付订单">
      <div slot="content">
        <h3>提交订单成功，请填写捐赠信息</h3>
        <p>请在24小时内完成支付，超时订单将自动取消</p>
        <p class="red">我们不会在您完成支付后的72小时内发货，您的支付将用作捐赠，例如服务器的维护等，感谢</p>
        <div class="form">
          <div class="input1">
            <span>姓名:</span><input type="text" placeholder="请输入您的姓名">
          </div>
          <div class="input2">
            <span>留言:</span><input type="textarea" placeholder="请输入您的留言">
          </div>
        </div>
        <div class="payway">支付方式</div>
        <div class="paycontent">
          <h4>支付金额：<span>￥1.00</span></h4>
          <div class="wx"><img src="/static/images/weixinpay@2x.png" alt=""></div>
          <div class="zfb"><img src="/static/images/alipay@2x.png" alt=""></div>
          <div class="qq"><img src="/static/images/qqpay.png" alt=""></div>
        </div>
      </div>
    </MShelf>
  </div>
</template>

<script>
import MShelf from '../../components/Shelf'
export default {
  name: 'Pay',
  components: {
    MShelf
  }
}
</script>

<style scoped>
h3 {
  margin-top: 50px;
  font-size: 30px;
  text-align: center;
}
p {
  text-align: center;
  margin: 10px 0;
}
.red {
  color: red;
}
.form {
  margin-top: 35px;
  text-align: center;
}
.form input {
  width: 220px;
  height: 30px;
  border-radius: 5px;
  border: 1px  solid #ccc;
  padding-left: 10px;
}
.input1 {
  margin-bottom: 10px;
}
.input1 span, .input2 span {
  margin-right: 10px;
}
.payway {
  width: 95%;
  font-size: 18px;
  margin: 30px auto 0;
  border-bottom: 1px solid #ccc;
}
.paycontent {
  overflow: hidden;
  padding: 20px 0 50px 20px;
}
.paycontent div {
  float: left;
  padding: 10px 10px 10px 10px;
  margin-left: 10px;
  border-radius: 5px;
  overflow: hidden;
  width: 175px;
  height: 50px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.wx {
  padding: 0 10px 10px 10px;
}
.paycontent img {
  width: 100%;
  height: 34px;
}
h4 {
  font-size: 18px;
  padding-left: 7px;
  margin-bottom: 20px;
}
h4 span {
  color: red;
}
</style>>